﻿<!DOCTYPE html>
<html>
	<head>
		<!-- 设置浏览器不缓存 -->
		<META HTTP-EQUIV="pragma" CONTENT="no-cache">
		<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
		<META HTTP-EQUIV="expires" CONTENT="0">
		<!-- Content-Type -->
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<!-- Favicon -->
		<link rel="shortcut icon" href="./images/logo.png">
		<title>企业服务共享中心-服务项目</title>
		<!--stylesheets-->
		<link rel="stylesheet" href="./plugins/element/index.css">
		<script src="./plugins/vue/vue.js"></script>
		<script src="./plugins/element/index.js"></script>
		<script src="./plugins/axios/axios.min.js"></script>
		<script src="./js/common/public.js?v=0.8.0.3"></script>
		<!-- 自定义样式表 -->
		<link rel="stylesheet" href="./css/base.css?v=0.8.0.3">
	</head>
	<body>
		<div id="app">
			<template>
				<el-container class="maincontainer">
					<el-container class="submaincontainer">
						<el-card class="box-card" style="position:relative;width:330px" shadow="never" v-show="leftbar_show">
							<div style="position:absolute;left:0;top:0;right:0;bottom:0;overflow-y:auto;overflow-x:hidden;padding-left: 20px;padding-top: 20px;padding-right: 20px;">
								<div slot="header" class="clearfix">
									<span>服务名称</span>
									<i class="el-icon-plus" style="margin-left:70px;color:#409EFF;cursor:pointer;" v-on:click="addservice()"></i>
									<i class="el-icon-edit" style="color:#409EFF;cursor:pointer;" v-on:click="editservice()"></i>
								</div>
								<el-tree :expand-on-click-node="false" :default-expand-all="true" :data="combinationForm.data" :props="combinationForm.defaultProps"
								 v-show="treeshow" @node-click="handleNodeClick"></el-tree>
							</div>
						</el-card>
						<el-card class="box-card" style="width:100%" shadow="never">
							<div slot="header" class="clearfix">
								<i v-on:click="showLeftBar()" v-bind:class="[leftbar_show ? 'el-icon-s-fold' : 'el-icon-s-unfold']" style="color:#409EFF;cursor:pointer;"></i>
								<span>服务明细</span>
								<el-button-group style="float: right;margin-top:0px;">
									<el-tooltip v-for="item in toolbar" class="item" effect="dark" v-bind:content="item.content" placement="top-start">
										<el-button size="small" v-bind:icon="item.icon" v-bind:type="item.type" @click="toolAction(item.content)">{{item.content}}</el-button>
									</el-tooltip>
								</el-button-group>
							</div>
							<div>
								<el-table row-key="id" border ref="multipleTable" @select='selectionChange' :data="pagedata" tooltip-effect="dark"
								 :height="tableHeight" style="width: 100%;" @selection-change="handleSelectionChange">
									<el-table-column v-for="column in tablecolums" v-bind:prop="column.prop" v-bind:label="column.label"
									 v-bind:min-width="column.width" show-overflow-tooltip>
									</el-table-column>
									<el-table-column label="操作">
										<template slot-scope="scope">
											<el-link type="primary" @click="edit(scope.$index, scope.row)">编辑</el-link>
										</template>
									</el-table-column>
								</el-table>
								<div style="margin-top: 20px">
									<el-pagination @current-change="handleCurrentPageChange" :current-page="queryForm.pageNo" :page-size="queryForm.pagesize"
									 background layout="total, prev, pager, next" :total="pagetotal">
									</el-pagination>
								</div>
							</div>
						</el-card>
					</el-container>
				</el-container>
				<el-dialog :close-on-click-modal="false" title="服务信息" :visible.sync="dialogFormVisible" width="600px">

					<el-form :model="serviceFormDetail" :rules="serviceDetailsRules" ref="serviceFormDetail" label-width="80px">


						<el-row :gutter="20">
							<el-col :span="12">
								<el-form-item label="服务名称" prop="serviceId">
									<el-select v-model="serviceFormDetail.serviceId" filterable>
										<el-option v-for="item in services" :key="item.id" :label="item.name" :value="item.id">
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="规格" prop="spec">
									<el-input v-model="serviceFormDetail.spec" style="width: 200px;"></el-input>
								</el-form-item>
							</el-col>
						</el-row>


						<el-row :gutter="20">
							<el-col :span="12">
								<el-form-item label="类别" prop="type">
									<el-input v-model="serviceFormDetail.type" style="width: 200px;"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="单价" prop="price">
									<el-input v-model="serviceFormDetail.price" style="width: 200px;"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="20">
							<el-col :span="12">

								<el-form-item label="单位" prop="unit">
									<el-input v-model="serviceFormDetail.unit" style="width: 200px;"></el-input>
								</el-form-item>

							</el-col>
							<el-col :span="12">

								<el-form-item label="成本金额" prop="cost">
									<el-input v-model="serviceFormDetail.cost" style="width: 200px;"></el-input>
								</el-form-item>

							</el-col>
						</el-row>

						<el-row :gutter="20" v-if="action!='add'" v-show="false">
							<el-col :span="24">
								<el-form-item label="服务项目" prop="items">
									<el-input v-model="serviceFormDetail.items"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="20">
							<el-col :span="24">
								<el-form-item label="备注" prop="memo">
									<el-input v-model="serviceFormDetail.memo"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-col :span="12">
							<el-form-item label="是否可用" prop="isactive">
								<el-select v-model="serviceFormDetail.isactive" filterable>
									<el-option v-for="item in actives" :key="item" :label="item" :value="item">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>

					</el-form>


					<div slot="footer" class="dialog-footer">
						<el-button @click="dialogFormVisible = false">取 消</el-button>
						<el-button type="primary" @click="cofirm">确 定</el-button>
					</div>
				</el-dialog>


				<el-dialog :close-on-click-modal="false" title="添加/修改服务" :visible.sync="addServiceFormVisible" width="400px">
					<el-form :inline="true" :model="serviceForm" ref="serviceForm" :rules="servicerules" label-width="80px" class="demo-form-inline">
						<el-form-item label="服务名称" prop="name">
							<el-col :span="20">
								<el-input v-model="serviceForm.name" style="width: 200px;"></el-input>
								<!-- 				  <el-select v-model="serviceForm.name" filterable>
				  	<el-option v-for="item in services" :key="item.id" :label="item.name" :value="item.name">
				  	</el-option>
				  </el-select> -->
							</el-col>
						</el-form-item>

					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="addServiceFormVisible = false">取 消</el-button>
						<el-button type="primary" @click="addserviceconfirm">确 定</el-button>
					</div>
				</el-dialog>
			</template>
		</div>
	</body>

	<script src="./js/servicedetail.js"></script>

	</script>
</html>
